<template>
  <div class="list">
    <section class="list-left">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addProduct()">添加产品</el-button>
      <ul class="list-left__list">
        <li
          class="list-left__list--item"
          v-for="(item, index) in productList"
          :key="index"
          :class="activeIndex === index ? 'activeItem' : ''"
          @click="switchNav(index, item)"
        >
          {{ item.name }}
        </li>
      </ul>
    </section>
    <section class="list-right">
      <AddEditProduct
        ref="form"
        v-show="isShow"
        @saveSuccess="saveSuccess"
        :productDetail="productDetail"
      ></AddEditProduct>
    </section>
  </div>
</template>

<script>
import AddEditProduct from '../components/AddEditProduct.vue'

export default {
  name: 'productList',
  components: {
    AddEditProduct,
  },
  data() {
    return {
      activeIndex: 0,
      productList: [],
      isShow: false,
      productDetail: {
        // 产品id
        id: '',
        // 资金方
        fundCode: '',
        // 最高利率
        interestRate: '',
        // 产品名称
        name: '',
        // 最高授信额度
        quota: '',
        // 还款方式 -- 目前只有一种随借随还
        repayMethod: '随借随还',
        // 授信有效期 -- 月
        creditIndate: '',
        // 结息类型 -- 0|月 1|日
        interestDateType: '0',
        // 最长贷款周期类型 -- 0|月 1|日
        deadLineType: '0',
        // 结息周期
        interestDate: '',
        // 最长贷款周期
        deadLine: '',
        // 状态
        status: '1',
        // 推荐星级
        recommendStar: null,
        // 产品详情
        productDetail: '',
      },
    }
  },
  methods: {
    addProduct() {
      this.isShow = true
      this.productDetail = {
        // 产品集code
        productSetCode: this.$route.query.productSetCode || '',
        // 产品id
        id: '',
        // 资金方
        fundCode: '',
        // 最高利率
        interestRate: '',
        // 产品名称
        name: '',
        // 最高授信额度
        quota: '',
        // 还款方式 -- 目前只有一种随借随还
        repayMethod: '随借随还',
        // 授信有效期 -- 月
        creditIndate: '',
        // 结息类型 -- 0|月 1|日
        interestDateType: '0',
        // 最长贷款周期类型 -- 0|月 1|日
        deadLineType: '0',
        // 结息周期
        interestDate: '',
        // 最长贷款周期
        deadLine: '',
        // 状态
        status: '1',
        // 推荐星级
        recommendStar: null,
        // 产品详情
        productDetail: '',
      }
      this.activeIndex = -1
      this.$refs['form'].$refs.form.resetFields()
    },
    switchNav(idx, item) {
      if (this.activeIndex === idx) return
      this.activeIndex = idx
      this.getProductDetailRequest(item.id)
      this.$refs['form'].$refs.form.resetFields()
    },
    saveSuccess({ isAdd }) {
      if (isAdd) {
        this.activeIndex = 0
        this.getProductListRequest()
      } else {
        this.getProductListRequest()
      }
    },
    async getProductListRequest() {
      const res = await this.$http.get(`/product_sets/${this.$route.query.productSetId}`)
      this.productList = (res && res.relationProducts) || []
      if (this.productList && this.productList.length) {
        await this.getProductDetailRequest(this.productList[this.activeIndex].id)
      }
    },
    async getProductDetailRequest(productId) {
      const res = await this.$http.get(`/products/${productId}`)
      console.log('产品详情', res)
      this.productDetail = res
      this.isShow = true
    },
  },
  mounted() {
    this.getProductListRequest()
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
